<template>
	<view class="container">
		<button class="return" v-if="isReturn" open-type="launchApp"> 返回 > </button>
		<view class="phone" @click="kfPhone()">
			<image src="http://images.linglinggong.net/icon2/phone.png" mode="aspectFill"></image>
			<text>客服</text>
		</view>
		<view style="position: fixed;top: 2%;right: 0;z-index: 99999999;" @click="handleOpenPage(9)">
			<image style="width: 180rpx;height: 100%;" src="http://images.linglinggong.net/Fvy9ESiw6ng0cEbOrKIcY2ALpoED"
				mode="widthFix"></image>
		</view>
		<view class="fix-title" @click="isShowShare = false">
			<view class="invite_info">
				<view class="invite_info_item">
					<text style="color: #661404;font-size: 26rpx;font-weight: 600;">有效邀请人数</text>
					<view style="position: relative;">
						<view class="tips3" style="right:-45%;top:-40%">
							<uni-tooltip :styleType="0" :styleType2="1" :styleType3="0"
								content="黑色:本月有效邀请的雇员 红色:本月有效邀请的雇主">
								<image style="" src="http://images.linglinggong.net/Ftgs3f9RjviRoe6o1qzQThRAav70"
									mode="widthFix"></image>
							</uni-tooltip>
						</view>
						<text class="invite_info_item_num" style="color: #661404">{{yxgy}}</text>
						<text class="invite_info_item_num" style="color: #FF444B">+{{yxgz}}</text>
					</view>
				</view>
				<view class="invite_info_border"></view>
				<view class="invite_info_item">
					<text style="color: #661404;font-size: 26rpx;font-weight: 600;">累计邀请人数</text>
					<view>
						<text class="invite_info_item_num">{{leijiRenshu}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="yaoqingjiangli">
			<view class="yaoqingjiangli-box">
				<view class="yaoqingjiangli-box-item bc1">
					<text class="yaoqingjiangli-box-num" style="color: #FE531B;"
						:style="{'font-size':yxgyMoney.length>2?'46rpx':''}">{{yxgyMoney}}</text>
				</view>
				<view class="yaoqingjiangli-box-item bc2" style="margin-left: 60rpx;">
					<text class="yaoqingjiangli-box-num" style="color: #EE5888;"
						:style="{'font-size':yxgyMoney.length>2?'46rpx':''}">{{yxgzMoney}}</text>
				</view>
				<view class="ljiyaoqing" @click="isShowShare = !isShowShare">
					<image src="http://images.linglinggong.net/Fi_YqpYT89ukua0rRWaSGwqOy1ee" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="yaoqingrenshu" @click="isShowShare = false">
			<view class="yaoqingrenshu-box">
				<view class="yaoqingrenshu-box-item">
					<view class="p-guyuan">
						<image src="http://images.linglinggong.net/FuR98mvNayIJqmwCaYAt2j2A7ufY" mode="widthFix">
						</image>
					</view>
					<pro-gress :list="Steps1" :topData="topData1" :type="0" :Current="percent1"></pro-gress>
				</view>
				<view class="yaoqingrenshu-box-item" style="margin-top: 30rpx;">
					<view class="p-guyuan">
						<image src="http://images.linglinggong.net/FuvtoKL5lKQm2dfHKgYwnyLBfGMe" mode="widthFix">
						</image>
					</view>
					<pro-gress :list="Steps2" :topData="topData2" :type="1" :Current="percent2"></pro-gress>
				</view>
				<view class="yaoqingrenshu-p">
					<view class="yaoqingrenshu-p-box">
						<view class="daoji-time" style="display: none;">
							<u-count-down :time="daojiTime" format="DD:HH:mm:ss" autoStart millisecond
								@change="onChange">
								<view class="time">
									<text class="time__item">{{ timeData.days }}天</text>
									<text
										class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
									<text class="time__item">{{ timeData.minutes }}分钟</text>
									<text class="time__item">{{ timeData.seconds }}秒</text>
								</view>
							</u-count-down>
						</view>
						<view v-if="remainderMonthDay>0" style="margin-bottom: -4rpx;">
							<text>本期仅剩：</text>
							<text style="font-size: 28rpx;">{{remainderMonthDay}}</text><text
								style="font-size: 26rpx;margin-top: 0rpx;">天</text>
						</view>
						<view v-else style="margin-bottom: -4rpx;">
							<view v-if="(24 - (new Date().getHours() + 1))>0">
								<text>本期仅剩：</text>
								<text>{{ 24 - (new Date().getHours() + 1) }}小时{{60 - new Date().getMinutes()}}分钟</text>
							</view>
							<view v-else>
								<text>本期仅剩：</text>
								<text>{{60 - new Date().getMinutes()}}分钟{{ 60 - new Date().getSeconds() }}秒</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="guize-btn-box" v-if="false">
			<view class="guize-btn-box-btn" @click="handleOpenPage(9)">邀 请 规 则</view>
		</view>
		<view class="yaoqingjiangli2" @click="isShowShare = false">
			<view class="yaoqingjiangli-box2">
				<view class="yaoqingjiangli-box-item2" style="margin-left: -10rpx;">
					<view class="tips1" style="right:17%;top:-7%">
						<uni-tooltip :styleType="1" content="本月累计获得的奖励">
							<image src="http://images.linglinggong.net/Ftgs3f9RjviRoe6o1qzQThRAav70" mode="widthFix">
							</image>
						</uni-tooltip>
					</view>
					<text class="yaoqingjiangli-box-num2">{{monthPrice}}
						<text style="font-size: 26rpx;color: #FE4B28;padding-left: 4rpx;"> 元</text></text>
				</view>
				<view class="yaoqingjiangli-box-item2">
					<view class="tips1" style="right:4%;top:-7%">
						<uni-tooltip :styleType="1" :styleType3="5" content="累计在平台获得的奖励">
							<image src="http://images.linglinggong.net/Ftgs3f9RjviRoe6o1qzQThRAav70" mode="widthFix">
							</image>
						</uni-tooltip>
					</view>
					<text class="yaoqingjiangli-box-num2">{{totalPrice}}
						<text style="font-size: 26rpx;color: #FE4B28;padding-left: 4rpx;"> 元</text></text>
				</view>
			</view>
		</view>
		<view class="bottom-img">
			<image src="http://images.linglinggong.net/FvU54BChARlAN3gvXKlH1jzj0rzT" mode="widthFix"></image>
		</view>
		<!-- 分享按钮 -->
		<view class="bottom" v-if="isShowShare">
			<!--  #ifdef  MP-WEIXIN -->
			<view>
				<button open-type="share" class="btn" @ShareAppMessage="onShareAppMessage">
					<image style="width: 100rpx;height: 100rpx;"
						src="https://images.linglinggong.net/Ficz7BA8MPeOlm1Wsh3LBExgLHjW" mode="aspectFill"></image>
				</button>
			</view>
			<view>
				<button open-type="share" class="btn" @ShareAppMessage="onShareAppMessage">
					<image style="width: 100rpx;height: 100rpx;"
						src="https://images.linglinggong.net/Fuh6El6jCQBEkH4fr-Pigum3R6kZ" mode="aspectFill"></image>
				</button>
			</view>
			<!-- #endif -->
			<view @click="handleOpenPost" style="background-color: #FFFFFF;">
				<image src="https://images.linglinggong.net/Fo3HJX1qsq-4TeGi_pzNq5Zif0yJ" mode="aspectFill"></image>
				<!-- <text>二维码</text> -->
			</view>
		</view>
		<!-- 分享海报 -->
		<view class="modal" :class="isShowPost ? 'show' : ''">
			<!-- 海报图 -->
			<canvas canvas-id="invitation-post"
				:style="{ width: '305px', height: '403px', position: 'fixed', top: '-9999px', left: '35px'}"></canvas>
			<view class="my-post" @longpress="handleSaveAlbum">
				<image class="bg" style="width: 540rpx;height: 540rpx;" :src="qrcode" mode="aspectFill"></image>
			</view>
			<image @click="handleClosePost" class="close" src="https://images.linglinggong.net/icon1/07.png"></image>
		</view>
		<u-popup mode="center" :show="isShowYaoq" @close="isShowYaoq=false" @open="openYaoq"
			:closeOnClickOverlay="false" bgColor="rgba(0,0,0,0)">
			<view class="fudai-box">
				<view class="fudai-box-center">
					<view class="fudai-box-center-p" @click="isShowYaoq=false">
						<image src="http://images.linglinggong.net/Fqt4OdqWbJpfLsTtPKZakyzJcxZ4" mode="widthFix">
						</image>
					</view>
					<image @click="closeYaoq" src="http://images.linglinggong.net/FrXwxopT93VDQpmkqFKzPxGHC-6P"
						mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		baseURL
	} from '@/config'
	import {
		getContacts
	} from '@/libs/unit.js'
	import proGress from '@/components/progress/progress.vue'
	import uniTooltip from '@/components/uni-tooltip/uni-tooltip.vue'
	export default {
		components: {
			proGress,
			uniTooltip
		},
		data() {
			return {
				toDay: '', //当前时间
				hasFlag: true, // 是否还有更多数据要加载
				imgPath: '', //图片路径
				friendsNum: '', //好友数量
				friendsList: [], //我的好友即下级列表
				friendsLists: [], //我的好友即下级列表
				isShowPost: false, //是否显示海报
				toUserId: 0,
				postUrl: '', //海报URL 
				time: '', //海报URL 
				times: '',
				obj: {},
				total: 0,
				num: 0,
				totalnum: '',
				isShowShare: false,
				requestObj: {
					pageNum: 0,
					pageSize: 10000,
				},
				timer: '', //
				Steps1: [],
				Steps2: [],
				topData1: [],
				topData2: [],
				percent1: 0,
				percent2: 0,
				timeData: {},
				serviceTelephone: '',
				daojiTime: 3600 * 1000 * 24 * 30,
				nowTime: new Date(),
				yxgy: 0,
				yxgz: 0,
				leijiRenshu: 0,
				monthPrice: 0,
				totalPrice: 0,
				yxgyMoney: 0,
				yxgzMoney: 0,
				gyMoneyList: [],
				gzMoneyList: [],
				yqUserAvantar: [],
				userInfo: uni.getStorageSync('userInfo'),
				isShowYaoq: false,
				qrcode: '',
				isReturn: false
			}
		},
		computed: {
			remainderMonthDay() {
				let nowMonth = new Date().getMonth() + 1;
				let nowYear = new Date().getFullYear();
				let nowDay1 = new Date().getDate();
				if (nowMonth === 1 || nowMonth === 3 || nowMonth === 5 || nowMonth === 7 || nowMonth === 8 || nowMonth ===
					10 || nowMonth === 12) {
					return 31 - nowDay1;
				}
				if (nowMonth === 4 || nowMonth === 6 || nowMonth === 9 || nowMonth === 11) {
					return 30 - nowDay1;
				}
				if (nowMonth == 2) {
					if ((nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 == 0) {
						return 29 - nowDay1;
					} else {
						return 28 - nowDay1;
					}
				}
			},
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			dateFormat() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				let week = date.getDay(); // 星期
				let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ];
				return (year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weekArr[
					week]);
			},
			async my_sub1() {
				let ress = await this.$fetch(this.$api.my_sub_in, {
					pageNum: 0,
					pageSize: 10000
				}, 'POST')
				if (ress.code) return uni.showToast({
					title: ress.msg,
					icon: 'none'
				})
				ress.rows.forEach(item => {
					item.avatar = item.toAvaer ? item.toAvaer : ''
					item.pic = this.imgPath + item.avatar
				})
				this.yqUserAvantar = [...this.yqUserAvantar, ...ress.rows]
				// console.log(this.yqUserAvantar)
				// console.log(ress)
			},
			async get_data() {
				// console.log(uni.getStorageSync('region').slice(0, 6))
				let res = await this.$fetch(this.$api.my_invInfo, {
					region: '330783'
				}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// console.log(res.data)
				this.yxgy = res.data.monthGy
				this.yxgz = res.data.monthGz
				this.leijiRenshu = res.data.totalInv
				this.yxgyMoney = res.data.rule.money0[res.data.rule.money1.length - 1]
				this.yxgzMoney = res.data.rule.money1[res.data.rule.money1.length - 1]
				this.gyMoneyList = res.data.rule.money0
				this.gzMoneyList = res.data.rule.money1
				this.monthPrice = res.data.monthPrice
				this.totalPrice = res.data.totalPrice
				this.topData1 = res.data.rule.person0
				this.topData2 = res.data.rule.person1
				// this.yxgy = 8
				// this.yxgz = 8
				if (this.yxgy > 0) {
					let rr = this.topData1.filter(item => {
						return item <= this.yxgy
					})
					let tempNum
					if (rr.length == 1) {
						tempNum = 6
					}
					if (rr.length == 2) {
						tempNum = 14
					}
					if (rr.length == 3) {
						tempNum = 15
					}
					if (rr.length == 4) {
						tempNum = 11
					}
					if (rr.length == 5) {
						tempNum = 0
					}
					// let tempNum = this.yxgy==this.topData1[this.topData1.length - 1]?0:this.yxgy
					let prc = this.yxgy / this.topData1[this.topData1.length - 1] * 100 - tempNum
					this.percent1 = Number(prc.toFixed(0))
					this.topData1.forEach((item, index) => {
						this.Steps1.push({
							id: index + 1,
							isTrue: item <= this.yxgy ? true : false,
							jine: this.gyMoneyList[index] * this.topData1[index]
						})
					})
				} else {
					this.percent1 = 0
					this.topData1.forEach((item, index) => {
						this.Steps1.push({
							id: index + 1,
							isTrue: item <= this.yxgy ? true : false,
							jine: this.gyMoneyList[index] * this.topData1[index]
						})
					})
				}
				if (this.yxgz > 0) {
					let rr2 = this.topData2.filter(item => {
						return item <= this.yxgz
					})
					let tempNum2
					if (rr2.length == 1) {
						tempNum2 = 10
					}
					if (rr2.length == 2) {
						tempNum2 = 5
					}
					if (rr2.length == 3) {
						tempNum2 = 5
					}
					if (rr2.length == 4) {
						tempNum2 = 5
					}
					if (rr2.length == 5) {
						tempNum2 = 0
					}
					let prc2 = this.yxgz / this.topData2[this.topData1.length - 1] * 100 - tempNum2
					this.percent2 = Number(prc2.toFixed(0))
					this.topData2.forEach((item, index) => {
						this.Steps2.push({
							id: index + 1,
							isTrue: item <= this.yxgz ? true : false,
							jine: this.gzMoneyList[index] * this.topData2[index]
						})
					})
					// console.log(this.Steps1)
				} else {
					this.percent2 = 0
					this.topData2.forEach((item, index) => {
						this.Steps2.push({
							id: index + 1,
							isTrue: item <= this.yxgz ? true : false,
							jine: this.gzMoneyList[index] * this.topData2[index]
						})
					})
				}
			},
			handleOpenPage(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/help/help-detail?id=' + id
				})
			},
			myjob() {
				uni.navigateTo({
					url: '/pages/myjob/myjob?fr=' + JSON.stringify(this.friendsLists)
				})
			},
			gengduo() {
				uni.navigateTo({
					url: '/pages/invite-friend/invite-friend-detail?xygy=' + this.yxgy + '&xygz=' + this.yxgz +
						'&leijiRenshu=' + this.leijiRenshu
				})
			},
			openYaoq() {
				this.isShowYaoq = true
			},
			closeYaoq() {
				this.isShowYaoq = false
				this.isShowShare = true
			},
			// 保存至相册
			handleSaveAlbum() {
				uni.saveImageToPhotosAlbum({
					filePath: this.postUrl,
					success: (res) => {
						uni.showToast({
							title: '海报已存至相册'
						})
						this.isShowPost = false
						this.task_share()
					}
				})
			},
			formatDuring(mss) {
				var days = parseInt(mss / (1000 * 60 * 60 * 24));
				var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = (mss % (1000 * 60)) / 1000;
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				return hours + ":" + minutes + ":" + seconds;
			},
			// 获取我的下级 好友
			async my_sub() {
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.my_sub, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let ress = await this.$fetch(this.$api.my_sub_in, this.requestObj, 'POST')
				if (ress.code) return uni.showToast({
					title: ress.msg,
					icon: 'none'
				})
				/* console.log(ress) */
				this.totalnum = " " + res.total
				// 整理数据
				ress.rows.forEach(item => {
					item.avatar = item.toAvaer ? item.toAvaer : ''
					item.pic = this.imgPath + item.avatar
					if (item.status == 2) {
						this.num = this.num + item.invitationPrice
					}
					if (item.status != 0 && item.status != 4) {
						this.total = this.total + 1;
					}
					if (item.status == 1) {
						let Time = new Date(item.jiacheTimes.replace(/-/g, '/'));
						let timestemp = Time.getTime(); //开工时间
						let timestempday = (new Date()).getTime(); //当前时间
						let xjian = (timestemp - timestempday)
						/* 	console.log(xjian, '~~~~~~~~') */
						item.jiacheTimess = xjian
						/* 	console.log(xjian<0, '~~~~~~~~') */
						if (xjian > 0) {
							item.jiacheTimes = this.formatDuring(xjian)
						} else {
							item.jiacheTimes = '00:00:00'
						}
					}
				})
				this.friendsList = [...this.friendsList, ...ress.rows]
				res.rows.forEach(item => {
					item.avatar = item.avatar ? item.avatar : ''
					item.pic = this.imgPath + item.avatar
					var st = 0
					for (var i = 0; i < this.friendsList.length; i++) {
						if (item.userId == this.friendsList[i].toUserId) {
							st = this.friendsList[i].status + 1
							break
						}
					}
					item.stot = st
				})
				// 拼接
				this.friendsLists = [...this.friendsLists, ...res.rows]
				this.hasFlag = this.friendsList.length < ress.total
				// 改标题
				this.friendsNum = res.total
				this.changTitle()
				this.bust()
			},
			bust() {
				this.timer = setInterval(() => {
					this.friendsList.forEach(item => {
						if (item.status == 1) {
							console.log(item.jiacheTimes)
							item.jiacheTimess = item.jiacheTimess - 1000
							item.jiacheTimes = '00:00:00'
							item.jiacheTimes = this.formatDuring(item.jiacheTimess)
						}
					})
				}, 1000)
			},
			//判断有几个好友
			changTitle() {
				if (this.friendsNum) {
					uni.setNavigationBarTitle({
						title: '邀请好友'
					})
				}
				/* （' + this.friendsNum + '）' */
			},
			// 获取二维码
			async get_user_qrcode() {
				let res = await this.$fetch(this.$api.get_user_qrcode, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// console.log('数据',res.data);
				this.obj = res.data
				this.$nextTick(() => {
					this.createdPost2(this.imgPath + res.data.avatar, res.data.userName, this.imgPath + res
						.data.path)
				})
			},
			onShareAppMessage() {
				return {
					title: '找零工',
					desc: '找零工',
					path: '/pages/index/index',
					imageUrl: this.postUrl,
					success: res => {
						this.task_share()
					},
					fail: res => {}
				}
			},
			//分享到
			handleShare(scene) {
				/* 	console.log(scene, this.postUrl) */
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 2,
					imageUrl: this.postUrl, //网络图片，先上传七牛
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						this.task_share()
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			async task_share() {
				let res = await this.$fetch(this.$api.task_share, {
					type: 2
				}, 'POST')
			},
			createdPost2(avatar, userName, qrcode) {
				this.qrcode = qrcode
				console.log('图片', this.qrcode)
			},
			// 创建画布
			createdPost(avatar, userName, qrcode) {
				console.log('创建画布', avatar, userName, qrcode)
				const ctx = uni.createCanvasContext('invitation-post')
				//背景图片
				ctx.drawImage('https://images.linglinggong.net/FuPR9A9XyOq8QI3YjJU4V3QVy4Dv', 0, 0, 305, 403)
				//用户名
				ctx.setFillStyle('#402110')
				ctx.font = "bold 14px PingFangSC-Medium";
				// ctx.fillText(userName, 160 / 2, 40 / 2 + 20)
				// const metrics = ctx.measureText(userName)
				//说明
				ctx.setFillStyle('rgba(64,33,16,0.50)')
				ctx.font = "12px PingFangSC-Regular";
				// ctx.fillText('扫码加入“找零工”，和我一起赚钱吧！', 163 / 2, 90 / 2 + 17)
				//二维码
				uni.downloadFile({
					url: qrcode,
					success: res => {
						ctx.drawImage(res.tempFilePath, 58 / 2, 210 / 2, 496 / 2, 496 / 2)
						//提示
						ctx.setFillStyle('#402110')
						ctx.font = "14px PingFangSC-Regular";
						ctx.fillText('长按二维码保存至相册', 166 / 2, 726 / 2 + 20)
						//任务头像
						ctx.arc(85 / 2, 85 / 2, 22.5, 0, 2 * Math.PI) // 画圆
						ctx.clip()
						ctx.drawImage('https://images.linglinggong.net/FuN6sJYVbK3tcG013bJ5rs5aveTW', 40 / 2,
							40 / 2, 45, 45)
						ctx.draw(true, () => {
							uni.canvasToTempFilePath({
								canvasId: 'invitation-post',
								success: (res) => {
									uni.hideLoading()
									this.postUrl = res.tempFilePath
									console.log('画图')
								}
							})
						})
					}
				})
			},
			//打开海报
			handleOpenPost() {
				this.isShowPost = true
				this.isShowShare = false
			},
			//拨打客服电话
			kfPhone() {
				uni.makePhoneCall({
					phoneNumber: this.serviceTelephone
				})
			},
			//关闭海报
			handleClosePost() {
				this.isShowPost = false
			}
		},
		onLoad(options) {
			this.isReturn = options.isApp
			// #ifdef APP-PLUS
			if (uni.getStorageSync('token')) {
				setTimeout(() => {
					getContacts()
				}, 1000)
			}
			// #endif
			if (!uni.getStorageSync('token')) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			this.imgPath = uni.getStorageSync('imgPath')
			this.get_data()
			this.my_sub1()
		},
		onShow() {
			this.isShowShare = false
			if (this.timer == '') {
				this.bust()
			}
			this.get_user_qrcode()
			this.serviceTelephone = uni.getStorageSync('serviceTelephone')
		},
		onHide() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #F3E9C9;
	}

	.container {
		width: 100%;
		background-image: url('https://images.linglinggong.net/FvlqIVWX0CmssTD7jvaEfgWuhwmi');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;

		.return {
			position: absolute;
			top: 100rpx;
			right: 0;
			padding: 0;
			font-size: 26rpx;
			width: 120rpx;
			height: 44rpx;
			border-radius: 22rpx 0 0 22rpx;
			text-align: center;
			line-height: 44rpx;
			background: #FF2F2F;
			color: #FFFFFF;
		}

		.fudai-box {
			width: 100vw;
			height: 100vh;
			// background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			.fudai-box-center {
				width: 70%;
				// height: 600rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.fudai-box-center-p {
					position: absolute;
					z-index: 999999;
					left: 0;
					top: 0;

					image {
						width: 56rpx;
						height: 100%;
					}
				}
			}
		}

		.phone {
			width: 130rpx;
			height: 50rpx;
			position: fixed;
			z-index: 99999999;
			top: 50%;
			right: 0;
			border-radius: 67rpx 0 0 67rpx;
			background-color: rgba(0, 0, 0, 0.4);
			display: flex;
			flex-direction: row;
			align-items: center;

			&>image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 13rpx;
				margin-right: 13rpx;
			}

			&>text {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 28rpx;
			}
		}

		.fix-title {
			z-index: 1;
			width: 100vw;
			height: 920rpx;
			// position: fixed;
			// background-color: #fbc831;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}

		.invite_info {
			width: 720rpx;
			height: 330rpx;
			background-image: url('http://images.linglinggong.net/Fv0nC6l5zYQsbi-ZJu-1pxRMTpzr');
			background-size: 100% 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			// border: 1px solid;
			// position: sticky;
			// margin-top: 100rpx;
			// top: calc(44px + 30rpx + var(--status-bar-height));
			.invite_info_item {
				height: 100rpx;
				width: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// border: 1px solid; 
				padding-top: 20rpx;
				margin-bottom: 100rpx;
				padding-left: 50rpx;
				padding-right: 50rpx;

				.tips3 {
					position: absolute;
					right: 8%;
					top: 10%;
					z-index: 9;

					// width: 50rpx;
					// border: 1px solid;
					image {
						width: 28rpx;
						height: 100%;
					}
				}

				&>text {
					font-size: 20rpx;
					font-weight: 400;
					color: #A5A5A5;
					line-height: 20rpx;
				}

				&>view {
					margin-top: 30rpx;

					&>image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.invite_info_border {
				width: 1rpx;
				height: 74rpx;
				border-left: 1rpx solid rgba(252, 201, 40, 0.5);
			}

			.invite_info_item_num {
				font-size: 38rpx;
				font-weight: 600;
				color: #FF444B;
				line-height: 45rpx;
			}

			.invite_info_item_num1 {
				font-size: 48rpx;
				font-weight: 500;
				color: #FE4B28;
				line-height: 45rpx;
			}
		}

		.yaoqingjiangli {
			// border: 1px solid red;
			width: 100%;
			// height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// margin-top: 310rpx;
			.yaoqingjiangli-box {
				width: 98%;
				margin-top: 10rpx;
				height: 410rpx;
				background-image: url('http://images.linglinggong.net/FkNKFOZg8ErHbEl5KmtarGZUhSia');
				background-size: 100% 100%;
				// border: 1px solid;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 30rpx;
				padding-bottom: 40rpx;
				position: relative;

				.ljiyaoqing {
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 3%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 540rpx;
						height: 100%;
					}
				}

				.yaoqingjiangli-box-item {
					// border: 1px solid;
					width: 36%;
					height: 300rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.yaoqingjiangli-box-num {
						margin-bottom: 130rpx;
						margin-left: -10rpx;
						font-size: 52rpx;
						font-weight: 600;
					}
				}

				.bc1 {
					background-image: url('http://images.linglinggong.net/FrHz6MbzREuhYPwXI_uwkJw_DeBl');
					background-size: 100% 100%;
					// margin-left: -10rpx;
				}

				.bc2 {
					background-image: url('http://images.linglinggong.net/FgtXwYNlBIK9QbioZTe3Ed3nAC-O');
					background-size: 100% 100%;
				}
			}
		}

		.yaoqingrenshu {
			width: 98%;
			margin: 0 auto;
			margin-top: 30rpx;
			height: 720rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: url('http://images.linglinggong.net/Fvq_mmtAvwzobGnw7UNZyYJHa_2V');
			background-size: 100% 100%;

			.yaoqingrenshu-box {
				width: 94%;
				position: relative;

				.yaoqingrenshu-p {
					position: absolute;
					bottom: -70rpx;
					left: 0;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.yaoqingrenshu-p-box {
						width: 60%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 26rpx;
					}
				}

				.yaoqingrenshu-box-item {
					padding: 60rpx 0;
					position: relative;

					.p-guyuan {
						position: absolute;
						left: 0;
						top: 0;

						image {
							width: 160rpx;
							height: 100%;
						}
					}
				}
			}
		}

		.daojishi {
			width: 100%;
			height: 90rpx;
			padding-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// border: 1px solid;
			.daojishi-box {
				width: 86%;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #666;
				}

				.daoji-time {
					.time {
						.time__item {
							letter-spacing: 4rpx;
							font-size: 34rpx;
							color: #ED0833;
							font-weight: 400;
						}
					}
				}
			}
		}

		.guize-btn-box {
			width: 100%;
			height: 100rpx;
			// border: 1px solid;
			padding-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.guize-btn-box-btn {
				width: 92%;
				height: 90%;
				background: #F39B19;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
				color: #fff;
				font-size: 32rpx;
			}
		}

		.guize-btn-box2 {
			width: 100%;
			height: 100rpx;
			// border: 1px solid;
			// padding-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;

			.guize-btn-box-btn2 {
				width: 62%;
				height: 80%;
				border-radius: 80rpx;
				// background: #FCC928;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;
				font-size: 28rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.yaoqingjiangli2 {
			// border: 1px solid red;
			width: 100%;
			// margin: 0 auto;
			padding-top: 20rpx;
			// height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// margin-top: 310rpx;
			.yaoqingjiangli-box2 {
				width: 98%;
				// margin-top: 80rpx;
				height: 540rpx;
				background-image: url('http://images.linglinggong.net/FiGQcROnQrr5_hmp4-NdSMJRrsBv');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// border: 1px solid;
				display: flex;
				justify-content: center;
				align-items: center;

				// padding-top: 60rpx;
				.yaoqingjiangli-box-item2 {
					width: 38%;
					height: 140rpx;
					margin-top: 34rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					.tips1 {
						position: absolute;
						right: 8%;
						top: 10%;
						z-index: 9;

						// width: 50rpx;
						// border: 1px solid;
						image {
							width: 28rpx;
							height: 100%;
						}
					}

					.yaoqingjiangli-box-num2 {
						margin-top: 40rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #FE4B28;
					}
				}
			}
		}

		.bottom-img {
			width: 100%;
			margin-top: -160rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.yiyaoqing {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.yiyaoqing-box {
				width: 70%;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.yiyaoqing-box-left {
					width: 140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					// border: 1px solid;
				}

				.yiyaoqing-box-mid {
					flex: 1;
					// border: 1px solid;
					display: flex;
					justify-content: space-around;
					align-items: center;

					// margin-right: -50rpx;
					// border: 1px solid red;
					.yiyaoqing-box-mid-item {
						width: 60rpx;
						// height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.yiyaoqing-box-right {
					width: 140rpx;
					// border: 1px solid;
					// margin-left: -40rpx;
					// border: 1px solid;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;

					image {
						padding-left: 2rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 20rpx;
						height: 100%;
					}
				}
			}
		}

		&>.bottom {
			z-index: 100;
			position: fixed;
			bottom: 0;
			width: 100vw;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			height: 180rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// width: 24%;
				background-color: #fff;
			}

			.btn::after {
				border: none;
			}

			&>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 24%;

				image {
					// bottom: 12rpx;
					width: 100rpx;
					height: 100rpx;
				}

				text {
					font-size: 24rpx;
				}
			}

			&>view:first-child {
				margin-left: 46rpx;
			}

			&>view:nth-child(2) {
				margin: 0 56rpx 0 76rpx;
			}

			&>view:last-child {
				flex: 1;
				height: 100rpx;
				background-color: #FCC928;

				&:active {
					opacity: 0.7;
				}
			}
		}

		&>.modal {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1110;
			opacity: 0;
			outline: 0;
			text-align: center;
			-ms-transform: scale(1.185);
			transform: scale(1.185);
			backface-visibility: hidden;
			perspective: 2000upx;
			background: rgba(0, 0, 0, 0.4);
			transition: all 0.3s ease-in-out 0s;
			pointer-events: none;

			&.show {
				opacity: 1;
				transition-duration: 0.3s;
				-ms-transform: scale(1);
				transform: scale(1);
				overflow-x: hidden;
				overflow-y: auto;
				pointer-events: auto;
			}

			.my-post {
				// border: 1px solid  #4CD964;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 610rpx;
				height: 806rpx;

				.bg {
					width: 610rpx;
					height: 806rpx;
				}
			}

			.close {
				position: fixed;
				width: 70rpx;
				height: 70rpx;
				left: 50%;
				margin-left: -35rpx;
				bottom: 90rpx;
			}
		}
	}
</style>